<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Lowin</title>
    <link rel="stylesheet" href="./css/auth.css" th:href="@{/css/auth.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
</head>
<body th:background="@{/images/background-img.jpeg}">
<div class="lowin lowin-blue">
    <div class="lowin-brand">
        <img src="./images/tb02.jpg" th:src="@{/images/logo-img.jpg}" alt="logo">
    </div>
    <div class="lowin-wrapper">
        <div class="lowin-box lowin-register">
            <div class="lowin-box-inner">
                <form>
                    <p>停车场管理系统</p>
                    <div class="lowin-group">
                        <label>用户名</label>
                        <input id="username" type="text" name="username" class="lowin-input" value="">
                    </div>
                    <div class="lowin-group">
                        <label>邮箱</label>
                        <input id="email" type="email" name="email" class="lowin-input" value="">
                    </div>
                    <div class="lowin-group">
                        <label>密码</label>
                        <input id="password" type="password" name="password" class="lowin-input" value="">
                    </div>
                    <button id="registButton" type="button" class="lowin-btn">
                        注册
                    </button>

                    <div class="text-foot">
                        已有账号? <a href="login.html" th:href="@{/admin/toLogin}" class="login-link">登陆</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/commonElement :: jsFile"></div>
<script th:inline="javascript" type="text/javascript">
    layui.use('layer', function () {
        var layer = layui.layer;
    });

    var registBtn = document.getElementById("registButton");
    var projectPath = [[${#httpServletRequest.getContextPath()}]];

    // 只能是字母数字
    var usernameReg = /^[A-Za-z0-9]{8,16}$/;
    var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

    registBtn.onclick = function () {
        var username = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;

        // 1：用户名有误；2：邮箱有误
        var flag = usernameReg.test(username) && emailReg.test(email);
        if (!flag) {
            console.log("username: " + username + ",type: " + typeof (username));
            console.log(usernameReg.test(username));
            console.log("email: " + email + ",type: " + typeof (email));
            console.log(emailReg.test(email));
            layer.open({
                title: '格式错误'
                , content: '用户名或邮箱格式错误！'
            });
        } else {
            var xhr = new XMLHttpRequest();
            var url = projectPath + "/admin/regist?" + "username=" + username + "&email=" + email + "&password=" + password;
            xhr.open('post', url);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var responseText = xhr.responseText;
                    if (responseText == "true") {
                        window.location.href = projectPath + "/admin/toLogin";
                    } else {
                        layer.open({
                            title: '信息错误'
                            , content: '用户名或邮箱已存在，请重新输入！'
                        });
                    }
                }
            }
        }
    };
</script>
</body>
</html>
